<template>
  <div class="login-container">
    <Top />
    <div
      class="box_content z-1 !border-none w-100 !bg-transparent !rounded-4% <sm:w-83"
    >
      <div class="login_tab">
        <div
          class="left cell"
          @click="active_on = 0"
          :class="{ active: active_on === 0 }"
        >
          <div class="inner-clip content_tabs caret-set">
            域账号
            <div class="recommend_icon">推荐</div>
          </div>
        </div>
        <div
          class="right cell"
          @click="active_on = 1"
          :class="{ active: active_on === 1 }"
        >
          <div class="inner-clip content_tabs caret-set">账号密码</div>
        </div>
      </div>
      <div class="content_desc">
        <div class="login_form">
          <!--  域账号box  -->
          <div v-show="active_on === 0">
            <h1 class="caret-set mb-80px color-#409EFF">使用域账号进行登录</h1>
            <el-button
              type="primary"
              style="width: 100%; height: 40px"
              @click="getRequestUrl"
              >自动登录</el-button
            >
          </div>
          <!--  账号密码box -->
          <div v-show="active_on === 1">
            <el-form
              ref="formRef"
              :model="form"
              :rules="formRules"
              class="mt-6"
              size="large"
            >
              <el-form-item prop="username">
                <el-input
                  v-model="form.username"
                  :prefix-icon="UserFilled"
                  :clearable="true"
                  autocomplete="off"
                  :placeholder="$t('login.usernamePlaceholder')"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="form.password"
                  :clearable="true"
                  autocomplete="off"
                  show-password
                  :placeholder="$t('login.passwordPlaceholder')"
                >
                  <template #prefix>
                    <img
                      src="@/assets/image/password.png"
                      style="width: 13px; height: 13px"
                    />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <div class="w-full flex-y-center justify-between">
                  <el-checkbox v-model="checked" class="<sm:text-sm">
                    {{ $t("login.remember") }}
                  </el-checkbox>
                  <el-text
                    type="primary"
                    class="caret-set cursor-pointer <sm:!text-sm"
                  >
                    {{ $t("login.forgetPassword") }}
                  </el-text>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button
                  class="w-full"
                  type="primary"
                  @click="onLogin(formRef)"
                  :loading="loading"
                >
                  {{ $t("login.login") }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { Top } from "./components";
import { formRules } from "./helpers/rule";
import { useUserStore } from "@/store";
import { UserFilled } from "@element-plus/icons-vue";
import { storage } from "@/utils/storage";
import crypto from "@/utils/AESencryption";
import { FormInstance } from "element-plus";

defineOptions({ name: "Login" });

const formRef = ref();
const checked = ref(false);
const loading = ref(false);
const userStore = useUserStore();

const active_on = ref<number>(0);

const form = reactive({
  username: "",
  password: "",
});
onMounted(() => {
  const userAccount = storage.get("userAccount");
  if (userAccount && userAccount.length) {
    const { username, password } = crypto.decryptAES(userAccount);
    form.username = username;
    form.password = password;
    checked.value = true;
  }
});

const onLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        loading.value = true;
        await userStore.login(form, checked.value);
      } finally {
        loading.value = false;
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 域账号登录
const getRequestUrl = () => {};
</script>

<style lang="scss" scoped>
.login-container {
  @apply relative wh-full flex-center dark:bg-#101628 bg-no-repeat bg-center-top;
  background-image: url("/src/assets/image/background.svg");
}
.box_content {
  height: 390px;
  box-shadow:
    0px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08);
}
.login_tab {
  position: relative;
  padding-bottom: 8px;
  margin-bottom: -19px;
  width: 400px;
  height: 48px;
  transform-style: preserve-3d;
  display: grid;
  grid: auto-flow / repeat(2, 1fr);
  align-items: center;
  grid-row-gap: 8px;
}

.login_tab .cell {
  position: absolute;
  width: 50%;
  font-size: 14px;
  text-align: center;
  color: #7f848b;
  transition:
    clip-path 0.2s,
    width 0.2s,
    height 0.2s;
}
.login_tab .cell .inner-clip {
  background-color: #ededed;
  padding: 10px 0 26px;
}
.login_tab .cell.left .inner-clip {
  border-top-left-radius: 12px;
}
.login_tab .cell.right {
  right: 0;
}

.login_tab .cell.right .inner-clip {
  border-top-right-radius: 12px;
}
.login_tab .cell.active {
  width: 55%;
  top: -11px;
  padding-bottom: 30px;
  transform: translateZ(0.1px);
  .inner-clip {
    color: rgba(0, 0, 0, 0.85);
    font-size: 18px;
  }
}
.content_tabs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
  line-height: 24px;
  cursor: pointer;
  &:hover {
    color: rgba(0, 0, 0, 0.85);
  }
  .recommend_icon {
    margin-left: 8px;
    padding: 0 4px;
    width: 32px;
    height: 16px;
    background: linear-gradient(90deg, #ffa034 0%, #ff584e 100%);
    border-radius: 4px 4px 4px 0px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    line-height: 16px;
    text-align: center;
  }
}
.login_tab .cell.active .inner-clip {
  @apply dark:bg-#243054 dark:color-#fff;
  background-color: #fff;
}

.cell.active.right .inner-clip {
  clip-path: path("m30 0  c -20 0   -10 40   -30 50  v0 h350 v-50 z");
}
.cell.active.left .inner-clip {
  clip-path: path("m189 0   c 20 0   10 40   30 50  v0 h-220 v-50 z");
}

.content_desc {
  @apply dark:bg-#243054;
  position: relative;
  background-color: #fff;
  width: 400px;
  border-radius: 12px 12px 0 0;
  height: calc(100% - 37px);
  overflow: auto;
  .login_form {
    padding: 40px;
  }
}
</style>
